<script setup>
import { ref, inject, reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
import { RefreshRight } from '@element-plus/icons-vue'
//引入axios
const axios = inject('axios')

//编辑子页面的“维护信息输入框”绑定变量
const textarea = ref('')

//管理子页面的显示
const editdialogFormVisible = ref(false)

//主页数据
const Mydata = reactive({
  "equipmentMaintenanceTasksVOS": []
})

//子页面数据
const sonData = reactive({
  "data": {
    "planMaintenanceEquipment": " ",
    "planTime": " ",
    "maintenanceStartTime": " ",
    "maintenanceEndTime": " ",
    "historicalMaintenanceInformation": " ",
    "textarea": " "
  }
})


//发送请求时的附带数据
const Data = reactive({
  "conditions": { "equipmentName": "", "startDate": "", "endDate": "" }
})

//获取主页的数据
function selectData() {
  axios({
    method: 'post',
    url: '/api/equipmentMaintenanceTasks/selectAll',
  }).then((response) => {
    console.log(response.data)
    if (response.data.success) {
      if (response.data.map.equipmentMaintenanceTasksVOS != null) {
        Mydata.equipmentMaintenanceTasksVOS = response.data.map.equipmentMaintenanceTasksVOS
        console.log("result:")
        console.log(response.data.map)
        console.log("Mydata.equipmentMaintenanceTasksVOS:")
        console.log(Mydata.equipmentMaintenanceTasksVOS)
        // myData.pageParams = response.data.map.pageParams
      } else {
        ElMessageBox.alert("无设备维护任务信息！", '结果')
      }
    } else {
      ElMessageBox.alert(response.data.msg, '结果')
    }
  }).catch((error) => {
    ElMessageBox.alert("系统错误！", '结果')
  })
}
selectData()

//按起止日期、设备类型获取主页数据
function selectData1() {
  console.log("Data:")
  console.log(Data)
  axios({
    method: 'post',
    url: '/api/equipmentMaintenanceTasks/select1',
    data: Data.conditions
  }).then((response) => {
    if (response.data.success) {
      if (response.data.map.equipmentMaintenanceTasksVOS != null) {
        Mydata.equipmentMaintenanceTasksVOS = response.data.map.equipmentMaintenanceTasksVOS
        console.log("result:")
        console.log(response.data.map)
        console.log("Mydata.equipmentMaintenanceTasksVOS:")
        console.log(Mydata.equipmentMaintenanceTasksVOS)
        // myData.pageParams = response.data.map.pageParams
      } else {
        ElMessageBox.alert("无首检信息！", '结果')
      }
    } else {
      ElMessageBox.alert(response.data.msg, '结果')
    }
  }).catch((error) => {
    ElMessageBox.alert("系统错误！", '结果')
  })
}

//刷新页面
function refresh() {
  if (Data.conditions.endDate != "" || Data.conditions.startDate != ""
    || Data.conditions.equipmentName != "") {
    selectData1()
  } else {
    selectData()
  }
}

//按设备编号获取子页面的数据并显示子页面
function selectDataOfSonPage(equipmentNo) {
  console.log("equipmentNo:" + equipmentNo)
  axios({
    method: 'post',
    url: '/api/equipmentMaintenanceTasks/selectByEquipmentNo?equipmentNo=' + equipmentNo,
  }).then((response) => {
    if (response.data.success) {
      if (response.data.map.equipmentMaintenanceTasksVOS2 != null) {
        sonData.data.planMaintenanceEquipment = response.data.map.equipmentMaintenanceTasksVOS2[0].planMaintenanceEquipment
        sonData.data.planTime = response.data.map.equipmentMaintenanceTasksVOS2[0].planTime
        sonData.data.maintenanceStartTime = response.data.map.equipmentMaintenanceTasksVOS2[0].maintenanceStartTime
        sonData.data.maintenanceEndTime = response.data.map.equipmentMaintenanceTasksVOS2[0].maintenanceEndTime
        sonData.data.historicalMaintenanceInformation = response.data.map.equipmentMaintenanceTasksVOS2[0].historicalMaintenanceInformation
        console.log("result:")
        console.log(response.data.map)
        console.log("sonData:")
        console.log(sonData)
        // myData.pageParams = response.data.map.pageParams
      } else {
        ElMessageBox.alert("无首检信息！", '结果')
      }
    } else {
      ElMessageBox.alert(response.data.msg, '结果')
    }
  }).catch((error) => {
    ElMessageBox.alert("系统错误！", '结果')
  })
  //显示子页面
  editdialogFormVisible.value = true
}

//表单序号自增
const indexMethod = (index) => {
  return index + 1
}

</script>

<template>
  <!-- 表格标题 -->
  <el-row style="background-color:white;margin:10px 10px 0 10px">
    <el-col :span="3" style="margin:10px 0 0 10px">设备维护任务</el-col>
  </el-row>
  <!-- 搜索相关组件 -->
  <el-row style="background-color:white;margin:0px 10px 0 10px">
    <el-col :span="2" style="margin:10px 0 0 10px">
      <el-button :icon="RefreshRight" @click="refresh">刷新</el-button>
    </el-col>
    <el-col :span="5" style="margin:10px 0 0 10px">
      <el-date-picker v-model="Data.conditions.startDate" type="date" placeholder="计划起始时间" />
    </el-col>
    <el-col :span="5" style="margin-top:10px">
      <el-date-picker v-model="Data.conditions.endDate" type="date" placeholder="计划结束时间" />
    </el-col>
    <el-col :span="9" style="margin-top:10px;">
      <el-input v-model="Data.conditions.equipmentName" placeholder="请输入设备类型" />
    </el-col>
    <el-col :span="2" style="margin-top:10px">
      <el-button type="success" @click="selectData1">查询</el-button>
      <!-- <el-button type="success">查询</el-button> -->
    </el-col>
  </el-row>
  <!-- 表单主体 -->
  <el-row style="background-color:white;margin:0 10px 0 10px">
    <el-col :span="24" style="margin-top:15px">
      <!--:data为测试数据，可对应数据库修改  stripe斑马纹效果 border带边框 -->
      <el-table :data="Mydata.equipmentMaintenanceTasksVOS" stripe border style="width:100%">
        <!-- 定义列表属性 prop值可对于数据库字段名修改-->
        <el-table-column label="序号" align="center" type="index" :index="indexMethod" width="60"></el-table-column>
        <el-table-column label="计划维护日期" align="center" prop="planTime" width="620" />
        <el-table-column label="计划维护设备" align="center" prop="planMaintenanceEquipment" width="120" />
        <el-table-column label="维护任务状态" align="center" prop="maintenanceTaskStatus" width="220" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button style="margin-left:10px;" :icon="Edit" size="small"
              @click="selectDataOfSonPage(scope.row.planMaintenanceEquipment)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 编辑子页面 -->
  <el-dialog v-model="editdialogFormVisible" title="填写设备维护信息" class="editPage" center>
    <!-- 维护设备名称 -->
    <el-row>
      <el-col :offset="1" :span="4" class="left">
        <span>维护设备名称</span>
      </el-col>
      <el-col :offset="1" :span="18">
        <span>{{ sonData.data.planMaintenanceEquipment }}</span>
      </el-col>
    </el-row>
    <!-- 计划维护时间 -->
    <el-row>
      <el-col :offset="1" :span="4" class="left">
        <span>计划维护时间</span>
      </el-col>
      <el-col :offset="1" :span="18">
        <span>{{ sonData.data.planTime }}</span>
      </el-col>
    </el-row>
    <!-- 维护开始时间 -->
    <el-row>
      <el-col :offset="1" :span="4" class="left">
        <span>维护开始时间</span>
      </el-col>
      <el-col :offset="1" :span="18">
        <span>{{ sonData.data.maintenanceStartTime }}</span>
      </el-col>
    </el-row>
    <!-- 维护完成时间 -->
    <el-row>
      <el-col :offset="1" :span="4" class="left">
        <span>维护完成时间</span>
      </el-col>
      <el-col :offset="1" :span="18">
        <span>{{ sonData.data.maintenanceEndTime }}</span>
      </el-col>
    </el-row>
    <!-- 历史维护信息 -->
    <el-row>
      <el-col :offset="1" :span="4" class="left">
        <span>历史维护信息</span>
      </el-col>
      <el-col :offset="1" :span="18">
        <pre style="font-size: 18px;font-weight:600">{{ sonData.data.historicalMaintenanceInformation }}</pre>
      </el-col>
    </el-row>
    <!-- 维护信息 -->
    <el-row>
      <el-col :offset="1" :span="4" class="left">
        <span>维护信息</span>
      </el-col>
      <el-col :offset="1" :span="18" class="left">
        <el-form>
          <el-form-item :label-width="formLabelWidth">
            <el-input v-model="textarea" :rows="5" type="textarea" placeholder="在此处填写您本次的维护信息" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 子页面按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary">开始维修任务</el-button>
        <el-button type="primary" disabled>保存维修信息</el-button>
        <el-button @click="editdialogFormVisible = false">返回</el-button>
        <el-button type="primary">完成维修任务</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.editPage span {
  font-size: 16px;
}

.editPage .el-row {
  margin-top: 15px;
}

.editPage .left span {
  color: blue;
}

::v-deep .el-textarea__inner {
  font-size: 16px;
}
</style>